@import '../../styles/global.less';
.k-page {
	color: @color;
	font-size: 13px;
	padding: 20px 0;
	user-select: none;
	.k-pager {
		margin: 0 auto;
		display: inline-block;
		vertical-align: middle;
		.k-pager-item {
			background: #fff;
			color: @color;
			min-width: 30px;
			height: 30px;
			line-height: 30px;
			border-radius: @radius;
			margin: 0 8px;
			text-align: center;
			display: inline-block;
			box-sizing: content-box;
			border: 1px solid @border-color;
			// transition: all 0.2s ease-in-out 0s;
			margin-left: -1px;
			font-size: 14px;
			cursor: pointer;
			position: relative;
			vertical-align: middle;
			&:hover {
				border-color: @main;
				color: @main;
				.k-icon {
					color: @main;
				}
			}
			&.active {
				border: 1px solid @main;
				color: @main;
			}
			span {
				margin: 0 5px;
			}
			.k-icon {
				color: @icon-color;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
		.k-pager-more {
			font-size: 20px;
			border-color: transparent;
			&:hover {
				border-color: transparent;
			}
		}
		.k-pager-item-disabled {
			border-color: @disable-border;
			cursor: not-allowed;
			.k-icon {
				color: @disable-color;
			}
			&:hover {
				border-color: @disable-border;
				.k-icon {
					color: @disable-color;
				}
			}
		}
		.k-pager-more {
			color: @gray;
		}
	}
	.k-page-sizer {
		display: inline-block;
		width: 90px;
	}
	.k-page-number {
		margin: 0 4px;
		display: inline-block;
		font-size: 13px;
	}
	.k-page-options {
		display: inline-block;
		font-size: 13px;
		span {
			padding: 0 5px;
		}
		.k-page-options-elevator {
			width: 50px;
			font-size: 13px;
			text-align: center;
			vertical-align: middle;
		}
		.k-page-options-action {
			vertical-align: middle;
		}
	}
}

.k-page-mini {
	.k-pager .k-pager-item {
		height: 24px;
		font-size: 12px;
		line-height: 24px;
		min-width: 24px;
	}
	.k-page-sizer {
		width: 80px;
	}
	.k-page-number {
		font-size: 12px;
	}
}